<template>
  <div>
    <!-- 导航 -->
    <!-- mode 导航方向 default-active 默认激活的导航 select自定义事件-->
    <!-- $router.currentRoute.name 当前的路由 -->
    <el-menu mode="horizontal" :default-active="$router.currentRoute.name">
      <!-- 菜单项 导航项 -->
      <el-menu-item index="home">
        <router-link to="/">首页</router-link>
      </el-menu-item>
      <el-menu-item index="recipe">
        <router-link :to="{ name: 'recipe' }">菜谱大全</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Header-menu",
};
</script>